<template>
  <view class="interview-card">
    <!-- {{data}} -->
    <view class="interview-card-header flex-row">
      <view class="flex-1 flex-col hidden">
        <view class="interview-card-title f-18 bold flex-1 clamp1 mb-24">{{data.job_name}}</view>
        <view class="interview-card-city flex-row align-items-center gray-color6 mb-24 clamp1 flex-1 hidden">
          <text class="mr-12 interview-card-cityicon gray-color6 nowrap" v-if="data.state && data.city">{{data.state}} {{data.city}}</text>
          <text class="mr-12 gray-color6 nowrap" :class="{'interview-card-dic': data.state && data.city && data.degree}">{{data.degree}}</text>
          <text class="mr-12 gray-color6 nowrap" :class="{'interview-card-dic': data.degree && data.experience}">{{data.experience}}</text>
        </view>
        <view class="flex-row clamp1 gray-color6">
          <text class="mr-12 gray-color6">{{data.brand.brand_name}}</text>
          <text class="mr-12 gray-color6">{{data.brand.employee_range}}</text>
          <text class="gray-color6">{{data.brand.funding_round}}</text>
        </view>
      </view>
      <view class="flex-col space-between">
        <view class="interview-card-hot gray-color6 mt-8" >
          <text v-show="userInfo.token">推荐指数:</text> <text class="bold red-color" v-show="userInfo.token">{{ score }}</text>  
        </view>
        <view @click="handlerSumBtn" v-show="userInfo.token">
          <pk-btn size="mini" type="success">
            <view class="f-14 bold color-wirte">模拟面试</view>
          </pk-btn>
        </view> 
      </view>
    </view>
    <view class="interview-card-content mt-24" v-if="userInfo.token"> 
      <view class="divider mt-24 mb-24"></view>
      <view class="f-14 " v-if="content.length > 0">{{content}}</view>
      <view class="f-14 text-center" v-if="content.length < 1 && !loading"><text @click="upload" class="bold color-blur">上传简历</text>, 体验DeepSeek智能推荐</view>
      <view class="interview-card-loading mt-8" v-if="loading">
        <view class="interview-card-loadingicon"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, defineProps, onMounted, defineEmits } from 'vue'
  import { getRecommendInfo, generateSession } from '@/api/api'
  const emit = defineEmits(['onDetail', 'onLogin'])
  import { useInfoStore } from '@/store/info'
  const userInfo = useInfoStore()
  const props = defineProps({
    data: {
      type: Object,
      default: () => {}
    }
  })
  const score = ref('')
  const content = ref('')
  const loading = ref(false)


  const handlerSumBtn = () => {
    if (!userInfo.token) {
      emit('onLogin')
      return
    }
    generateSession({
      scene:'D',
      channel_id: props.data.job_id
    }).then(res => {
      if (res.code == 1000) {
        uni.navigateTo({
          url: '/pages/webview/index?weburl=' + encodeURIComponent(res.data)
        });
      }
    })
  }

  const upload = () => {
    uni.switchTab({
      url: '/pages/resume/index'
    }); 
  }

  const getStr = (text) => {
    loading.value = true
    let i = 0;
    const type = () => {
      if (i < text.length) {
        content.value += text.charAt(i);
        i++;
      } else {
        loading.value = false
        clearInterval(typingInterval); // 停止定时器，因为文本已经完全显示出来。如果需要光标效果，可以注释掉这行。
      }
    };
    const typingInterval = setInterval(type, 50);
  }
  const getInit = () => {
    if (!userInfo.token) {
      return
    }
    loading.value = true
    getRecommendInfo({
      job_id: props.data.job_id
    }).then(res => {
      if (res.code == 1000) {
        score.value = res.data.score
        getStr(res.data.reason)
      } else if (res.code == 3001) {
        loading.value = false 
      } else {
        getInit()
      }
      emit('onDetail', res.data.reason)
      console.log('------------------', res)
    }).catch(err => {
      loading.value = false
      getInit()
    })
  }
  onMounted(() => {
    getInit()
  })
</script>

<style lang="scss" scoped>
  .interview-card{
    border: #ddd 1px solid;
    padding: 32rpx;
    background: #fff;
    border-radius: 24rpx;
    font-size: 28rpx;
    &-city{
      flex-wrap: nowrap;
      height: 32rpx;
      line-height: 1.5;
      overflow: hidden;
    }
    &-cityicon{
      background: url("@/static/mapicon.png") center left no-repeat;
      padding-left:28rpx;
      background-size: 24rpx auto
    }
    &-loading{}
    &-loadingicon {
      width: 20rpx;
      height: 20rpx;
      background: url("@/static/loading.png") center left no-repeat; 
      background-size: 24rpx auto;
      animation: rotate 1s linear infinite;
    }
    &-dic{
      padding-left:24rpx;
      position: relative;
      &::after{
        content: '';
        position: absolute;
        top:50%;
        left:8rpx;
        width: 8rpx;
        height: 8rpx;
        background: #999;
        border-radius: 8rpx;
        margin-top: -2rpx;
      } 
    }
  }

  @keyframes rotate {
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
  }
</style>